<template>
	<view>
		<view style="flex-wrap: wrap;" class="flex w10" v-if="flex == 'transverse'">
			<view @tap="choice(index)" v-for="(item,index) in choiceList" :key="index" hover-stay-time="50" hover-class="hover" class="choice w5 flex">
				<view :style="{backgroundColor:item.check?choiceColor:''}" style=" margin: auto 10rpx; width: 20rpx; height: 20rpx; border: 1rpx solid #BBBBBB;"></view>
				<view>{{item.content}}</view>
			</view>
		</view>
		<view style="flex-wrap: wrap;" class="flex w10" v-else>
			<view style="flex-wrap: wrap;" @click="choice(index)" v-for="(item,index) in choiceList" :key="index" hover-stay-time="50" hover-class="hover" class="choice w10 flex">
				<view :style="{backgroundColor:item.check?choiceColor:''}" style=" margin: auto 10rpx; width: 20rpx; height: 20rpx; border: 1rpx solid #BBBBBB;"></view>
				<view>{{item.content}}</view>
				<view class="w10" v-if="item.check">
					<view @click.stop="tapChild(index,jdex)" v-for="(jtem,jdex) in item.child" :key="jdex" style="margin-left: 40rpx;" hover-stay-time="50" hover-class="hover" :hover-stop-propagation='true' class="choice w10 flex">
						<view   :style="{backgroundColor:jtem.check?choiceColor:''}" style=" margin: auto 10rpx; width: 20rpx; height: 20rpx; border: 1rpx solid #BBBBBB;"></view>
						<view>{{jtem.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default { 
		data() {
			return {
				selected:0,
				cl:[]
			}
		},
		props:{
			flex:{
				default:'transverse'
			},
			list:{
				default:()=>{
					return [{
						content:'通过',
						check:false
					},{
						content:'不通过',
						check:false
					}]
				}
			},
			choiceColor:{
				default:'#33B0FF'
			},
			maxChoice:{
				default:1
			}
		},
		computed:{
			choiceList:{
				get(){
					this.cl = []
					this.selected = 0
					this.list.forEach(e=>{
						if(e.check){
							this.selected++
						}
						if(e.childMax != 0){
							this.cl.push({
								...e,
								selected:0
							})
						}else{
							this.cl.push({
								...e
							})
						}
						
						
					})
					
					return this.cl;
				},
				set(newValue){
					console.log(newValue) 
					if(!this.cl[newValue].check){
						if(this.selected<this.maxChoice){
							console.log(this.selected)
							this.selected++
							this.cl[newValue].check = !this.cl[newValue].check
							this.$emit('changeCheck',this.cl)
						}else{
							
							
							var ss = this.maxChoice
							uni.showToast({
								mask:true,
								title:`最多只能选${ss}个选项！`,
								icon:'none'
							})
						}
					}else{
						console.log('this.selected减啦，',this.selected-1)
						this.selected--
						this.cl[newValue].check = !this.cl[newValue].check
						this.$emit('changeCheck',this.cl)
					}
					
				}
			}
		},
		methods: {
			choice(index){
				this.choiceList = index
				console.log(index,'this.selected[index] == ' + this.selected[index])
				return this.selected[index] == 1
			},
			tapChild(i,j){
				console.log(i,j)
				var item = this.cl[i]
				if(!item.child[j].check){
					if(item.selected<item.childMax){
						item.selected++
						item.child[j].check = !item.child[j].check
						this.$emit('changeCheck',this.cl)
					}else{
						var ss = item.childMax
						uni.showToast({
							mask:true,
							title:`最多只能选${ss}个选项！`,
							icon:'none'
						})
					}
				}else{
					item.selected--
					item.child[j].check = !item.child[j].check
					this.$emit('changeCheck',this.cl)
				}
			}
		}
	}
</script>
<style scoped>
	.hover{
		transform: scale(0.97);
		filter: grayscale(18%)
	}
	.choice{
		margin: 0 0 20rpx 0;
	}
</style>
